<template>
  <div class="dashboard-container">
    <!-- 欢迎信息面板 -->
    <a-card :bordered="false" class="welcome-card">
      <template #title>
        <div class="welcome-title">
          {{ t('dashboard.welcomeTitle', { username: userInfo?.nickname || userInfo?.username || 'Admin' }) }}
        </div>
      </template>
      <div class="welcome-content">
        <div class="user-avatar">
          <a-avatar :size="64" :src="userInfo?.avatar">
            <template #icon v-if="!userInfo?.avatar">
              <UserOutlined />
            </template>
          </a-avatar>
        </div>
        <div class="welcome-info">
          <p>{{ t('dashboard.welcomeInfo') }}</p>
          <p>{{ t('dashboard.lastLoginTime') }}: {{ formatDate(new Date()) }}</p>
        </div>
      </div>
    </a-card>
    
    <!-- 数据统计卡片 -->
    <div class="data-overview">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false" class="stat-card">
            <a-statistic 
              :title="t('dashboard.totalUsers')" 
              :value="statistics.totalUsers" 
              :value-style="{ color: '#1890ff' }"
            >
              <template #prefix>
                <TeamOutlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false" class="stat-card">
            <a-statistic 
              :title="t('dashboard.totalFiles')" 
              :value="statistics.totalFiles" 
              :value-style="{ color: '#52c41a' }"
            >
              <template #prefix>
                <FileOutlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false" class="stat-card">
            <a-statistic 
              :title="t('dashboard.totalNotifications')" 
              :value="statistics.totalNotifications" 
              :value-style="{ color: '#faad14' }"
            >
              <template #prefix>
                <BellOutlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false" class="stat-card">
            <a-statistic 
              :title="t('dashboard.systemUptime')" 
              :value="statistics.systemUptime" 
              :suffix="t('dashboard.days')"
              :value-style="{ color: '#eb2f96' }"
            >
              <template #prefix>
                <ClockCircleOutlined />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </div>
    
    <!-- 图表卡片 -->
    <a-row :gutter="[16, 16]" class="chart-row">
      <a-col :xs="24" :lg="12">
        <a-card 
          :bordered="false" 
          :title="t('dashboard.userGrowth')"
        >
          <div class="chart-placeholder">
            <div class="chart-description">{{ t('dashboard.userGrowthDesc') }}</div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card 
          :bordered="false" 
          :title="t('dashboard.systemStatus')"
        >
          <div class="chart-placeholder">
            <div class="chart-description">{{ t('dashboard.systemStatusDesc') }}</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    
    <!-- 最近活动列表 -->
    <a-card 
      :bordered="false" 
      :title="t('dashboard.recentActivity')"
      class="recent-activity"
    >
      <a-timeline>
        <a-timeline-item v-for="(activity, index) in recentActivities" :key="index">
          <div class="activity-item">
            <span class="activity-time">{{ activity.time }}</span>
            <span class="activity-user">{{ activity.user }}</span>
            <span class="activity-action">{{ activity.action }}</span>
            <span class="activity-target">{{ activity.target }}</span>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { 
  UserOutlined, 
  TeamOutlined, 
  FileOutlined, 
  BellOutlined, 
  ClockCircleOutlined 
} from '@ant-design/icons-vue'
import { useAuthStore } from '@/stores/auth'
import type { UserInfo } from '@/types/api/auth'

// 定义组件名称
defineOptions({
  name: 'Dashboard'
})

// 国际化
const { t } = useI18n()

// 用户状态
const authStore = useAuthStore()
const userInfo = ref<UserInfo | null>(authStore.userInfo)

// 统计数据
const statistics = reactive({
  totalUsers: 158,
  totalFiles: 432,
  totalNotifications: 26,
  systemUptime: 112
})

// 最近活动
const recentActivities = reactive([
  {
    time: '2023-03-28 14:32',
    user: 'Admin',
    action: t('dashboard.activity.login'),
    target: 'System'
  },
  {
    time: '2023-03-28 13:15',
    user: 'User1',
    action: t('dashboard.activity.upload'),
    target: 'report.xlsx'
  },
  {
    time: '2023-03-28 11:42',
    user: 'User2',
    action: t('dashboard.activity.create'),
    target: t('dashboard.activity.newUser')
  },
  {
    time: '2023-03-27 18:30',
    user: 'Admin',
    action: t('dashboard.activity.update'),
    target: t('dashboard.activity.systemConfig')
  },
  {
    time: '2023-03-27 16:08',
    user: 'User3',
    action: t('dashboard.activity.delete'),
    target: 'old-data.docx'
  }
])

// 格式化日期
const formatDate = (date: Date): string => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取仪表盘数据
onMounted(() => {
  // 这里可以调用API获取实际数据
  // 示例中使用了模拟数据
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  .welcome-card {
    margin-bottom: $spacing-md;
    
    .welcome-title {
      font-size: $font-size-lg;
      font-weight: 600;
    }
    
    .welcome-content {
      display: flex;
      align-items: center;
      
      .user-avatar {
        margin-right: $spacing-lg;
      }
      
      .welcome-info {
        p {
          margin-bottom: $spacing-sm;
          
          &:last-child {
            margin-bottom: 0;
            color: $text-color-secondary;
          }
        }
      }
    }
  }
  
  .data-overview {
    margin-bottom: $spacing-md;
    
    .stat-card {
      height: 100%;
      transition: box-shadow 0.3s;
      
      &:hover {
        box-shadow: $box-shadow-base;
      }
    }
  }
  
  .chart-row {
    margin-bottom: $spacing-md;
    
    .chart-placeholder {
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f9f9f9;
      border-radius: $border-radius-base;
      
      .chart-description {
        color: $text-color-secondary;
        text-align: center;
        padding: $spacing-md;
      }
    }
  }
  
  .recent-activity {
    .activity-item {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
      
      .activity-time {
        color: $text-color-secondary;
        min-width: 150px;
      }
      
      .activity-user {
        font-weight: 600;
        min-width: 80px;
      }
      
      .activity-action {
        color: $primary-color;
      }
      
      .activity-target {
        color: $text-color-primary;
      }
    }
  }
}

// 响应式调整
@include responsive(xs) {
  .dashboard-container {
    .welcome-content {
      flex-direction: column;
      text-align: center;
      
      .user-avatar {
        margin-right: 0;
        margin-bottom: $spacing-md;
      }
    }
    
    .recent-activity {
      .activity-item {
        flex-direction: column;
        gap: 4px;
        
        .activity-time,
        .activity-user {
          min-width: auto;
        }
      }
    }
  }
}
</style> 